<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>驾校一点通</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/iconfont-page2.css" />
		<script type="text/javascript" src="js/config.js"></script>
		<script type="text/javascript" src="js/utils/mui.min.js"></script>
		<script type="text/javascript" src="js/utils/template.js"></script>
		<script type="text/javascript" src="js/utils/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/base.js"></script>

		<script>
			window.addEventListener('refresh', function(event) {
				if (event.detail.id) {
					document.getElementById("avator").src = ApiUrl + '/' + event.detail.photo;
					document.getElementById("nickname").innerHTML = event.detail.name;
					$('#do_login').removeClass('isLogin');
					$('#logout').show();
				}
			});
		</script>
		<style type="text/css">
			.info-msg {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			.avator {
				width: 50px;
				height: 50px;
				border-radius: 100%;
				box-shadow: -1px 0 10px #CCCCCC, 1px 0 1px #CCCCCC, 0 -1px 1px #CCCCCC, 0 1px 1px #CCCCCC;
				/*底边阴影*/
			}
			
			.nickname {
				margin-top: 5%;
				margin-left: 15px;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">
			<ul class="mui-table-view info-msg" id="status1">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right isLogin" id="do_login">
						<img id="avator" class="avator mui-pull-left" src="images/default.jpg" alt="头像" />
						<span id="nickname" class="nickname mui-tab-label mui-pull-left">尚未登陆</span>
					</a>
				</li>
			</ul>
			<script type="text/html" id="status2">
			</script>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-icon mui-icon-email"></span>
						<span class="mui-tab-label">新消息通知</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right ">
						<span class="mui-icon mui-icon-locked"></span>
						<span class="mui-tab-label">隐私</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-icon mui-icon-gear"></span>
						<span class="mui-tab-label">设置选项</span>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<span class="mui-icon mui-icon-chatboxes"></span>
						<span class="mui-tab-label">关于我们</span>
					</a>
				</li>
			</ul>
			<ul id="logout" class="mui-table-view do-logout" style="margin-top: 25px;display: none;">
				<li class="mui-table-view-cell">
					<a style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		mui('.mui-content').on('tap', '.isLogin', function() {
			mui.openWindow({
				url: 'login.html',
				id: 'login.html'
			});
		});
		mui('.mui-content').on('tap', '#logout', function() {
			JXXC.mode.user.logout();
			$('.avator').attr('src', 'images/default.jpg');
			$('.nickname').html('尚未登陆');
			$('#logout').hide();
			$('#do_login').addClass('isLogin');
		});
	</script>

</html>